<!DOCTYPE html>
<html lang="zh-cn" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>我的工具合集666</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 注意：项目正式环境请勿引用该地址 -->
    <link href="layui/css/layui.css" rel="stylesheet">
    <link rel="shortcut icon" type="image/x-icon" href="image/favicon.ico">
    <script src="js/dock.js"></script>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
        --sc_color: transparent;
        --bgc: rgba(22, 183, 119, 0.43);
        --app_size: 200px;

    }

    .layui-layer {
        background-color: transparent;
    }

    body {
        display: block;
        text-align: center;
        background-image: url(img/ic_bg.jpg);
        user-select: none;
    }

    .container::-webkit-scrollbar {
        width: 4px;
        background: var(--sc_color);
    }

    .container::-webkit-scrollbar-button {
        width: 4px;
        height: 0px;
        background: var(--bgc);
    }

    .container::-webkit-scrollbar-thumb {
        background: var(--sc_color);
    }

    .container:hover {
        --sc_color: var(--bgc);
        overflow: hidden auto;
    }

    .container {
        width: auto;
        height: 452px;
        display: grid;
        overflow: hidden auto;
        justify-content: center;
        align-content: stretch;

        justify-items: center;
        align-items: center;

        grid-template-columns: repeat(auto-fill, var(--app_size));
        grid-auto-rows: var(--app_size);
        grid-gap: 1px;
        gap: 1px 1px;
        padding: 1px;
        margin-left: 4px;
    }

    .app_item {
        display: flex;
        width: 100%;
        min-width: var(--app_size);
        height: 100%;
        min-height: var(--app_size);
        border: 1px solid var(--bgc);
        justify-content: center;
        align-items: center;
        background-color: #fff0;
        cursor: pointer;
    }

    .dock {
        position: absolute;
        bottom: 5px;
        left: 50%;
        height: 100px;
        width: auto;
        background-color: rgba(255, 255, 255, 0.4);
        line-height: 60px;
        border-radius: 14px;
        padding: 0px;
        border: 1px solid #666;
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
    }

    .dock .cover {
        height: 100%;
        width: 100%;
        position: relative;
        z-index: 1;
    }

    .dock .item {
        position: absolute;
        bottom: 14px;
        list-style: none;
        border-radius: 10px;
        float: left;
        height: 30px;
        width: 30px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        pointer-events: auto;
        z-index: 99999999;
    }

    .dock .item .title {
        position: absolute;
        height: 24px;
        width: max-content;
        padding: 0px 10px;
        line-height: 24px;
        font-size: 12px;
        top: -40px;
        left: 50%;
        margin-left: -10px;
        background-color: rgba(255, 255, 255, 0.4);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
        border-radius: 5px;
        opacity: 0;
    }

    .dock .item .title::before {
        content: "";
        height: 0;
        width: 0;
        border: 8px solid transparent;
        border-top: 8px solid rgba(255, 255, 255, 0.4);
        position: absolute;
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
        left: 50%;
        top: 100%;
        margin-left: -8px;
    }

    .dock .item:hover .title {
        opacity: 1;
    }
</style>
<body>
<div class="container">
</div>
<div id="dock" class="dock"></div>
<script src="layui/layui.js"></script>
<script>
    var $ = layui.jquery, layer = layui.layer;
    //触发事件
    var active = {
        setTop: function () {
            var that = this;
            //多窗口模式，层叠置顶
            layer.open({
                type: 1 //此处以iframe举例
                , title: '6'
                , area: ['390px', '260px']
                , shade: 0
                , maxmin: true
                , offset: [ //为了演示，随机坐标
                    Math.random() * ($(window).height() - 300)
                    , Math.random() * ($(window).width() - 390)
                ]
                , content: ''

                // ,btn: ['继续弹出', '全部关闭'] //只是为了演示
                // ,yes: function(){
                //     $(that).click();
                // }
                // ,btn2: function(){
                //     layer.closeAll();
                // }

                , zIndex: layer.zIndex //重点1
                , success: function (layero, index) {
                    layer.setTop(layero); //重点2. 保持选中窗口置顶

                    //记录索引，以便按 esc 键关闭。事件见代码最末尾处。
                    layer.escIndex = layer.escIndex || [];
                    layer.escIndex.unshift(index);
                    //选中当前层时，将当前层索引放置在首位
                    layero.on('mousedown', function () {
                        var _index = layer.escIndex.indexOf(index);
                        if (_index !== -1) {
                            layer.escIndex.splice(_index, 1); //删除原有索引
                        }
                        layer.escIndex.unshift(index); //将索引插入到数组首位
                    });
                }
                , end: function () {
                    //更新索引
                    if (typeof layer.escIndex === 'object') {
                        let windex = layer.escIndex.splice(0, 1);
                    }

                }
            });
        }
        , confirmTrans: function () {
            //配置一个透明的询问框
            layer.msg('大部分参数都是可以公用的<br>合理搭配，展示不一样的风格', {
                time: 20000, //20s后自动关闭
                btn: ['明白了', '知道了', '哦']
            });
        }
        , notice: function () {
            //示范一个公告层
            layer.open({
                type: 1
                ,
                title: false //不显示标题栏
                ,
                closeBtn: false
                ,
                area: '300px;'
                ,
                shade: 0.8
                ,
                id: 'LAY_layuipro' //设定一个id，防止重复弹出
                ,
                btn: ['火速围观', '残忍拒绝']
                ,
                btnAlign: 'c'
                ,
                moveType: 1 //拖拽模式，0或者1
                ,
                content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">你知道吗？亲！<br>layer ≠ layui<br><br> layer 只是作为 layui 的一个弹层模块，由于其用户基数较大，所以常常会有人以为 layui 是 <del>layerui</del><br><br>layer 虽然已被 Layui 收编为内置的弹层模块，但仍然会作为一个独立组件全力维护、升级 ^_^</div>'
                ,
                success: function (layero) {
                    var btn = layero.find('.layui-layer-btn');
                    btn.find('.layui-layer-btn0').attr({
                        href: '/2.7/'
                        , target: '_blank'
                    });
                }
            });
        }
        , offset: function (othis) {
            var type = othis.data('type')
                , text = othis.text();

            layer.open({
                type: 1
                , offset: type //具体配置参考：/2.7/docs/modules/layer.html#offset
                , id: 'layerDemo' + type //防止重复弹出
                , content: '<div style="padding: 20px 100px;">' + text + '</div>'
                , btn: '关闭全部'
                , btnAlign: 'c' //按钮居中
                , shade: 0 //不显示遮罩
                , yes: function () {
                    layer.closeAll();
                }
            });
        }
    };

    let dockApp = [];

    $('#layerDemo .layui-btn').on('click', function () {
        var othis = $(this), method = othis.data('method');
        active[method] ? active[method].call(this, othis) : '';
    });
    // active["setTop"]()

    //多窗口模式 - esc 键
    $(document).on('keyup', function (e) {
        if (e.keyCode === 27) {
            layer.close(layer.escIndex ? layer.escIndex[0] : 0);
        }
    });

    function getIndex(ele) {
        for (let i = 0; i < dockApp.length; i++) {
            if (ele[0].id === dockApp[i].ele[0].id) {
                return i;
            }
        }
    }

    function setTopEle() {
        let max = 0
        let maxI = 0;
        for (let i = 0; i < dockApp.length; i++) {
            dockApp[i].topEle = false;
            if (dockApp[i].visibility) {
                let tmpZIndex = parseInt(dockApp[i].ele[0].style.zIndex)
                if (tmpZIndex > max) {
                    max = Math.max(max, tmpZIndex)
                    maxI = i;
                }
            }
        }
        if (dockApp[maxI].visibility) {
            dockApp[maxI].topEle = true;
        }
    }

    function dockAppShow(index) {
        if (dockApp[index].visibility) {
            if (!dockApp[index].topEle) {
                layer.zIndex++;
                dockApp[index].ele.css('z-index', layer.zIndex + 1);
                dockApp[index].topEle = true;
            } else {
                dockApp[index].visibility = false
                setTopEle()
            }
        } else {
            dockApp[index].visibility = true
            layer.zIndex++;
            dockApp[index].ele.css('z-index', layer.zIndex + 1);
            dockApp[index].topEle = true;
        }
        dockApp[index].ele.css('visibility', dockApp[index].visibility ? "visible" : "hidden");
        setTopEle()


    }

    let items = []
    const option = {
        icon_size: 50,
        icon_padding: 5,
        scale: 2
    }
    let macDock = null;

    function pushAndRefreshDock(object) {
        dockApp.push(object)
        macDock.items.push({
            id: object.id,
            title: object.title,
            icon: "",
            click: "dockAppShow(" + (dockApp.length - 1) + ")"
        })
        macDock.reset_size()
    }

    function closeAndRefreshDock(windex) {
        for (let i = 0; i < dockApp.length; i++) {
            if (dockApp[i].windex === windex) {
                for (let j = 0; j < macDock.items.length; j++) {
                    if (dockApp[i].id === macDock.items[j].id) {
                        macDock.remove(j)
                        dockApp.splice(i, 1);
                        return;
                    }
                }

            }
        }
    }

    defaultSetting = {
        id: null,
        url: null,
        title: " ",
        width: "500px",
        height: "600px",
        offset: [],
        bgcolor: "#FFF",
        success: function (layero, index) {

        }
    }

    function openWindow({} = defaultSetting) {
        let param = {...defaultSetting, ...arguments[0]}
        for (let i = 0; i < dockApp.length; i++) {
            if (dockApp[i].id === param.id) {
                dockAppShow(i)
                return;
            }
        }

        if (layui.data('win_position') != null) {
            let oldData = layui.data('win_position')[param.id]
            if (oldData != null) {
                Object.getOwnPropertyNames(oldData).forEach(value => {
                    param[value] = oldData[value];
                })
            }
        }
        // var loadIndex = layer.load(0, {shade: false});
        let loadIndex;

        layer.open({
            id: param["id"]
            , type: 2 //此处以iframe举例
            , title: (typeof param["title"] === "string" ? [param["title"], "background-color:#FFF;"] : param["title"])
            , area: [param["width"], param["height"]]
            , shade: 0
            , anim: 0
            , skin: "layui-layer-win10"
            , maxmin: true
            , offset: param["offset"]
            , content: [param["url"], 'yes']
            , resize: true
            , min: function (layero, index) {
                layero[0].style.visibility = "hidden"
                dockEle.style.zIndex = new Date().getTime()+""
                return false;
            },
            max:function(){

            }
            , zIndex: layer.zIndex //重点1
            , success: function (layero, index) {
                let tmp = layero[0]
                let iframe = tmp.querySelector(".layui-layer-content")
                iframe.style.backgroundColor = param["bgcolor"];

                layer.setTop(layero); //重点2. 保持选中窗口置顶
                //记录索引，以便按 esc 键关闭。事件见代码最末尾处。
                layer.escIndex = layer.escIndex || [];
                layer.escIndex.unshift(index);
                //选中当前层时，将当前层索引放置在首位
                layero.on('mousedown', function () {
                    var _index = layer.escIndex.indexOf(index);
                    if (_index !== -1) {
                        layer.escIndex.splice(_index, 1); //删除原有索引
                    }
                    layer.escIndex.unshift(index); //将索引插入到数组首位
                    setTopEle()
                });
                param["success"].call(param, layero, index)
                param.visibility = true;
                pushAndRefreshDock({...param, ele: layero, topEle: true, windex: index})
                layer.close(loadIndex); // 关闭 loading
                dockEle.style.zIndex = new Date().getTime()+""
            }
            , end: function () {
                //更新索引
                if (typeof layer.escIndex === 'object') {
                    let windex = layer.escIndex.splice(0, 1);
                    if (windex === undefined) {
                        windex[0] = 0;
                    }
                    closeAndRefreshDock(windex[0]);
                }
                layer.close(loadIndex); // 关闭 loading
            },
            moveEnd: function (layero) {
                let index = getIndex(layero)
                let rect = layero[0].getBoundingClientRect()
                layui.data('win_position', {
                    key: dockApp[index].id,
                    value: {
                        offset: [rect.top + "px", rect.left + "px"],
                        width: rect.width + "px",
                        height: rect.height + "px",
                    }
                })
            },
            resizing: function (layero) {
                let index = getIndex(layero)
                let rect = layero[0].getBoundingClientRect()
                layui.data('win_position', {
                    key: dockApp[index].id,
                    value: {
                        offset: [rect.top + "px", rect.left + "px"],
                        width: rect.width + "px",
                        height: rect.height + "px",
                    }
                })

            }
        });

        loadIndex = layer.open({
            type: 2,
            title: [" ", "background-color:#fff"],
            anim: 0,
            shade: 0,
            closeBtn: 0,
            isOutAnim: false,
            offset: param["offset"],
            area: [param["width"], param["height"]],
            content: ['tool/loading.html', 'yes']
        });
    }

    // openWindow({
    //     title: "niu",
    //     url: "视差滚动.html",
    //     success: (ele, index) => {
    //         console.log(this)
    //     }
    // })

    let app = [
        {
            id: "calc",
            title: "计算器",
            url: "tool/calc.html",
            width: "500px",
            height: "600px",
        },
        {
            id: "json",
            title: "JSON 格式化",
            url: "tool/json.html",
            width: "920px",
            height: "851px",
            offset: "auto",
        },
        {
            id: "md5",
            title: "MD5 计算",
            url: "tool/md5.html",
            width: "500px",
            height: "600px",
        }, {
            id: "python",
            title: "Python",
            url: "python.html",
            width: "500px",
            height: "600px",
        },
        {
            id: "html",
            title: "Html",
            url: "html.html",
            width: "500px",
            height: "600px",
        },
        {
            id: "note",
            title: "记事本",
            url: "tool/记事本.html",
            width: "500px",
            height: "600px",
        },
        {
            id: "div3d",
            title: "Div3D",
            url: "Div3D.html",
            width: "500px",
            height: "600px",
        },
        {
            id: "manager",
            title: "管理",
            url: "manager/index.html",
            width: "800px",
            height: "600px",

        }
    ];

    function func(index) {
        openWindow(app[index])
    }


    let tmp = `
                {{#  layui.each(d, function(index, item){ }}
                  <div class="app_item" data-index="{{index}}" data-id="{{item.id}}" onclick="func({{index}})">
                    <div>{{= typeof item.title == "string"?item.title:item.title[0] }}</div>
                  </div>
               {{#  }); }}`
    layui.use('laytpl', function () {
        let elemView = document.getElementsByClassName('container')[0]; // 视图对象
        // 渲染并输出结果
        layui.laytpl(tmp).render(app, function (str) {
            elemView.innerHTML = str;
        });
    });
    let dockEle = document.getElementById("dock");
    macDock = new MacDock(dockEle, items, option)
    dockEle.addEventListener("mouseenter", function () {
        dockEle.style.zIndex = new Date().getTime()+""
    })

    let a = {}
    layer.config({
        title: ["", "background-color: #FFF"]
    })

    function RandomNum(Min, Max) {
        var Range = Max - Min;
        var Rand = Math.random();
        var num = Min + Math.round(Rand * Range); //四舍五入
        return num;
    }

</script>
</body>
</html>